<template>
	<view class="content">
		<view class="item-wrap" v-for="(value,index) in datas" :key="index">
			<view class="date">
				<text>{{value.crate_time}}</text>
			</view>
			<view class="name">
				<image :src="value.avatar"></image>
				<view class="name_text">{{value.nicheng}}上传了{{value.listsimg.length}}张照片</view>
			</view>
			<view class="img_group">
				<view v-for="(val,id) in value.listsimg" :key="id" class="one_img">
					<!-- <view class="del"><i @click="del_img(index,id,val.img_id)" class="iconfont iconshanchu"></i></view> -->
					<lazy-image :img_urls="img_urls" class="lazy-image" :realSrc="val.visit_path" :placeholdSrc="placeholderSrc"></lazy-image>
					<!-- <image @tap="previewImage" :data-src="val.visit_path" :src="val.visit_path"></image> -->
				</view>
			</view>

		</view>
		<view :class="{is_show:isshow}" class="loading">{{loadingText}}</view>

	</view>
</template>

<script>
	import lazyImage from "@/components/lazy-image.vue";
	import cDate from '@/common/util.js';
	export default {
		data() {
			return {
				groupid: '',
				album_id: '',
				datas: '',
				img_urls: [],
				page: 1,
				isshow: true,
				placeholderSrc: this.defimg,
				loadingText: ''
			}
		},
		components: {
			lazyImage
		},
		onLoad(e) {
			this.album_id = e.album_id
			this.groupid = uni.getStorageSync('groupData').groupid;
			this._getDataList()

		},
		onNavigationBarButtonTap: function() {
			uni.switchTab({
				url: '../index/index'
			})
		},
		onPullDownRefresh: function() {
			this._getDataList();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom: function() {
			var _this = this;
			if (this.timer != null) {
				clearTimeout(this.timer);
			}
			this.isshow = false;
			this.loadingText = '加载中...';
			this.timer = setTimeout(function() {
				_this.page = _this.page + 1;
				_this._getData(_this.page, 8);
			}, 1000);
		},
		methods: {
			_getDataList() {
				this.$gapi.apiPost('user/photo/listsImg', {
					"album_id": this.album_id
				}).then((res) => {
					if (res.data.code == 200) {
						this.datas = res.data.data.data;
						for (let i = 0; i < this.datas.length; i++) {
							// var date = new Date(parseInt(this.datas[i].crate_time) * 1000).toLocaleString().replace(/:\d{1,2}$/, ' ');
							var date = cDate.getFormatTime(this.datas[i].crate_time);
							this.datas[i].crate_time = date;
							for (let j = 0; j < this.datas[i].listsimg.length; j++) {
								this.img_urls.push(this.datas[i].listsimg[j].visit_path);
							}
						}
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				});
			},
			_getData(page, pagesize) {
				let token = uni.getStorageSync('token')
				this.$gapi.apiPost('user/photo/listsImg', {
					"k_token": token,
					"album_id": this.album_id,
					"page": page,
					"pagesize": pagesize
				}).then((res) => {
					if (res.data.code == 200) {
						this.datas = this.datas.concat(res.data.data.data);
						for (let i = 0; i < this.datas.length; i++) {
							// var date = new Date(parseInt(this.datas[i].crate_time) * 1000).toLocaleString().replace(/:\d{1,2}$/, ' ');
							var date = cDate.getFormatTime(this.datas[i].crate_time);
							this.datas[i].crate_time = date;
							for (let j = 0; j < this.datas[i].listsimg.length; j++) {
								this.img_urls.push(this.datas[i].listsimg[j].visit_path);
							}
						}
					} else {
						let _this = this
						this.loadingText = '已加载全部'
						this.timer = setTimeout(function() {
							_this.isshow = true
						}, 1000)
					}
				});
			},
			del_img: function(index, id, img_id) {
				var _this = this;
				uni.showModal({
					title: '',
					content: '确认删除图片吗',
					success: res => {
						let token = uni.getStorageSync('token')
						this.$gapi.apiPost('user/photo/delete', {
							"k_token": token,
							"img_id": img_id,
							"groupid": _this.groupid
						}).then((res) => {
							if (res.data.code == 200) {
								this.datas[index].listsimg.splice(id, 1);
								if (this.datas[index].listsimg.length == 0) {
									this.datas.splice(index, 1);
								}
							} else {
								uni.showToast({
									title: '删除失败',
									mask: false,
									duration: 1500
								});
							}

						});


					}
				});


			},
			previewImage: function(e) {
				var current = e.target.dataset.src
				uni.previewImage({
					current: current,
					urls: this.img_urls
				})
			}
		}
	}
</script>

<style>
	.item-wrap {
		border-top: 20upx solid #EEE;
	}

	.item-wrap:first-child {
		border-top: none;
	}

	.jiahao {
		width: 80upx;
		height: 80upx;
		position: fixed;
		bottom: 50upx;
		right: 5%;
	}

	.jiahao image {
		width: 80upx !important;
		height: 80upx !important;
	}

	.is_show {
		display: none;
	}

	.loading {
		width: 100%;
		text-align: center;
		line-height: 80px;
	}

	.del {
		width: 31%;
		height: 40upx;
		position: absolute;
		/* background: #ddd; */
		display: flex;
		margin-top: -20upx;
		margin-right: -20upx;
		justify-content: flex-end;
		/* opacity:0.3; */
	}

	.del i {
		color: #D2D2D2;
	}

	.content {
		width: 100%;
		height: 100%;
		position: absolute;
	}

	.date {
		margin-top: 15upx;
		margin-left: 3%;
	}

	.date text {
		font-size: 30upx;
		padding-left: 15upx;
		color: #333333;
		border-left: 5upx #FF9900 solid;
	}

	.name {
		height: 80upx;
		line-height: 80upx;
		margin-left: 5%;
		display: flex;
		justify-content: flex-start;
	}

	.name_text {
		height: 80upx;
		line-height: 80upx;
		margin-left: 20upx;
		font-size: 28upx;
		color: #999999;
	}

	.name image {
		border-radius: 60upx;
		width: 100%;
		width: 60upx;
		height: 60upx;
		margin-top: 10upx;
	}

	.img_group {
		width: 96%;
		margin: auto;
		margin-bottom: 20upx;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.one_img {
		padding: 8upx;
		width: 31%;
		height: 232upx;
	}

	.one_img image {
		width: 100%;
		height: 100%;

	}

	.hr {
		width: 100%;
		height: 20upx;
		background: #eeeeee;
		margin-bottom: 28upx;
	}
</style>
